<template>
    <div class="feed-infinite-wrapper" ref="wrapper">
        <tt-loading v-show="refreshLock" message="推荐中"></tt-loading>
        <msgAlert :category="category" :suspensionTip="suspensionTip"></msgAlert>
        <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-immediate-check="containerCheck" infinite-scroll-distance="80">
            <li v-for="(item, index) in list" :class="{'J_ad': item.ad_id, 'J_qihu_ad': item.ad_qihu_id > -1}" :ad_id="item.ad_id" :ad_qihu_id="item.ad_qihu_id"
                :ad_extra="item.log_extra" :ad_track="item.ad_track" @click="feedItemClick(item)">
                <ugcMode v-if="item.ugc_data" :item="item"></ugcMode>
                <singleMode v-else-if="item.single_mode" :item="item" :dislikeUrl="dislikeUrl" :getUserInfoUrl="getUserInfoUrl"></singleMode>
                <moreMode v-else-if="item.has_gallery" :item="item"></moreMode>
                <refreshMode v-else-if="item.refresh_mode" :item="item" @click.native.stop="refresh"></refreshMode>
                <noMode v-else :item="item"></noMode>
            </li>
        </ul>
        <tt-loading v-show="loadmoreLock" message="加载中"></tt-loading>
    </div>
</template>

<style lang="less">
    @import '../common/style/item-style.less';

    .feed-infinite {
        &-wrapper {
            position: relative;

            .J_ad,
            .J_qihu_ad {
                display: block !important;
            }
        }
    }
</style>

<script>
  import Emitter from '../../../../src/mixins/emitter.js';
  import eventBus from '../../../../src/js/eventBus.js';
  import singleMode from '../feedItem/singleMode.vue';
  import moreMode from '../feedItem/moreMode.vue';
  import noMode from '../feedItem/noMode.vue';
  import ugcMode from '../feedItem/ugcMode.vue';
  import refreshMode from '../feedItem/refreshMode.vue';
  import msgAlert from '../common/msgAlert.vue';
  import FeedList from '../_data/FeedList.js';
  import {
    ttSetAds,
    ttSendMsg
  } from '../_data/tAdMonitor.js';
  import {
    qhSetAds,
    qhSendMsg
  } from '../_data/qhAdMonitor.js';
  import {
    elOffset
  } from '../../../../src/js/utils.js';

  export default {
    name: "FeedBox",
    mixins: [Emitter],
    props: {
      category: {
        type: String,
        default: ''
      },
      url: {
        type: String,
        default: ''
      },
      qhAdSupport: {
        type: Boolean,
        default: false
      },
      suspensionTip: {
        type: Boolean,
        default: true
      },
      initList: {
        type: Array,
        default: () => []
      },
      containerCheck: {
        type: Boolean,
        default: true
      },
      dislikeUrl: {
        type: String,
        default: '/api/dislike/'
      },
      getUserInfoUrl: {
        type: String,
        default: '/user/info/'
      }
    },
    data() {
      return {
        refreshLock: false,
        loadmoreLock: false,
        loading: false,
        offsetTop: 0,
        _feedList: null,
        list: []
      };
    },
    mounted() {
      this.configList();

      this.$on('feed-item-dislike', this._dislike);
      this.$on('feed-refresh', this.refresh);
      eventBus.$on('feed-refresh-bus', this.refresh);
    },
    updated() {
      // 自营广告
      let ads = document.querySelectorAll('.J_ad');
      ads.length && ttSetAds(ads);

      let qads = document.querySelectorAll('.J_qihu_ad');
      qads.length && qhSetAds(qads, 'feed_qihu_ad');
    },
    methods: {
      configList() {
        this.offsetTop = elOffset(this.$refs.wrapper).top;

        this._feedList = new FeedList({
          url: this.url,
          category: this.category,
          qhAdSupport: this.qhAdSupport,
          initList: this.initList
        });

        if (this.initList.length === 0) {
          this.refresh(true);
        } else {
          this.list = this._feedList.getList();
        }

        setInterval(() => {
          this.list = this._feedList.updateTime();
        }, 60000);
      },
      refresh(first) {
        first === true && window.scrollTo(0, 0);
        first !== true && window.scrollTo(0, this.offsetTop);

        this.broadcast('MsgAlert', 'feed-refresh', {});

        this.loading = true;
        this.refreshLock = true;

        this._feedList.refresh((list, len) => {
          this.list = list;
          this.broadcast('MsgAlert', 'feed-refresh-count', len);
          window.ttAnalysis && ttAnalysis.send('event', {
            ev: 'article_show_count',
            ext_id: len
          });
        }, () => {
          this.loading = false;
          this.refreshLock = false;
        });
      },
      loadMore() {
        this.loading = true;
        this.loadmoreLock = true;

        this._feedList.loadMore((list, len) => {
          this.list = list;
          window.ttAnalysis && ttAnalysis.send('event', {
            ev: 'article_show_count',
            ext_id: len
          });
        }, () => {
          this.loading = false;
          this.loadmoreLock = false;
        });
      },
      feedItemClick(item) {
        if (item && item.ad_id) {
          ttSendMsg({
            label: 'click',
            value: item.ad_id,
            extra: item.log_extra
          });
        }
        if (item && item.ad_qihu_id > -1) {
          qhSendMsg(item.ad_qihu_id, 'feed_qihu_ad', 'click');
        }
      },
      _dislike(id) {
        this.list = this._feedList.dislikeItem(id);
      }
    },
    components: {
      singleMode,
      moreMode,
      noMode,
      ugcMode,
      refreshMode,
      msgAlert
    }
  };
</script>



// WEBPACK FOOTER //
// mainFeed.vue?d11b3d44